<template>
  <div class="page-content">
    <el-alert :title="GroupName" type="success" />

    <tao-table :data="GroupList" :showPage="false" style="margin-top: 15px">
      <el-table-column label="发送者" prop="From_Account" width="150" />
      <el-table-column label="内容" prop="MsgDetail" />
      <el-table-column label="序号" prop="MsgSeq" width="80" />
      <el-table-column fixed="right" label="操作" width="150">
        <template v-slot="scope">
          <el-button
            type="text"
            style="color: #FA6962"
            :icon="scope.row.From_Account === '' ? '' : 'el-icon-delete'"
            @click="toRecallGroupMsg(scope.row.MsgSeq)"
          >
            {{ scope.row.From_Account === '' ? '' : '撤回' }}
          </el-button>
        </template>
      </el-table-column>
    </tao-table>
  </div>
</template>

<script>
import { getGroupHistoryMsg, recallGroupMsg } from '@/api/ImChat';

export default {
  inject: ['reload'],
  data() {
    return {
      GroupID: '',
      GroupName: '详情',
      GroupList: []
    };
  },
  mounted() {
    this.GroupID = this.$route.query.id;
    this.toGetGroupHistoryMsg(this.GroupID);
  },
  methods: {
    // 获取历史聊天记录
    toGetGroupHistoryMsg(id) {
      const data = { groupID: id };
      getGroupHistoryMsg(data).then(res => {
        if (res.code === 200) {
          res.data.RspMsgList.forEach(msg => {
            const tempMsg = {
              From_Account: msg.From_Account,
              MsgSeq: msg.MsgSeq,
              flag: true
            };

            if (typeof msg.MsgBody[0] === 'object') {
              tempMsg.MsgDetail = JSON.stringify(msg.MsgBody[0]);
              
            } else {
              if (msg.From_Account === '') {
                tempMsg.MsgDetail = '已删除的消息';
                tempMsg.flag = false;
              } else {
                tempMsg.MsgDetail = '系统消息';
              }
            }
            this.GroupList.push(tempMsg);
            
          });
        }
      });
    },

    // 撤回记录
    toRecallGroupMsg(MsgSeq) {
      const data = {
        MsgSeq,
        groupID: this.GroupID
      };

      recallGroupMsg(data).then(res => {
        if (res.code === 1) {
          this.reload();
          this.$message('删除OK');
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.page-content {
  width: 100%;
  height: 100%;
}
</style>
